<template>
  <el-form label-position="top">
    <el-form-item label="位置">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">经度</div>
          <el-input v-model.number="cimPanelData.position_x" placeholder="" disabled />
        </div>
        <div class="row-item-col">
          <div class="title">纬度</div>
          <el-input v-model.number="cimPanelData.position_y" placeholder="" disabled />
        </div>
        <div class="row-item-col">
          <div class="title">海拔</div>
          <el-input v-model.number="cimPanelData.position_z" placeholder="" disabled />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="旋转">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.rotation_x" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.rotation_y" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.rotation_z" placeholder="" @change="updateAttr" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="缩放">
      <div class="row-item">
        <el-input v-model.number="cimPanelData.scale_x" placeholder="" @change="updateAttr" />
      </div>
    </el-form-item>
    <el-form-item label="偏移">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.longitude" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.latitude" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.height" placeholder="" @change="updateAttr" />
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
interface IProps {
  panelData: any;
}

const props = withDefaults(defineProps<IProps>(), {
  panelData: {},
});
const emits = defineEmits(['update']);

const cimPanelData = ref<any>({});

function updateAttr() {
  emits('update', cimPanelData.value);
}

watchEffect(() => {
  cimPanelData.value = props.panelData;
});
</script>

<style lang="less" scoped></style>
